<template>
    <div class="problem-list">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form  :model="formData" ref="formData" label-width="100px" slot="form" :rules="rules">
                <el-row :gutter="41">
                   <el-col :span="8">
                        <el-form-item label="学科" prop="subject">
                            <el-select v-model="formData.subject" placeholder="请选择" style="width:100%">
                                <el-option
                                v-for="item in formData.subjectList" 
                                :key="item.summaryKey" 
                                :label="item.summaryName" 
                                :value="item.summaryKey">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col> 
                    <el-col :span="8">
                        <el-form-item label="状态">
                            <el-select v-model="formData.state" placeholder="请选择" style="width:100%">
                                <el-option 
                                v-for="item in formData.options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button type="primary" @click="onSubmit('formData')">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
             
            <div class="table-title" slot="table-title"></div>
            <el-table :data="problemList" style="width: 100%" border v-loading="loading">  
                <el-table-column type="index" align="center" label="编号" width="60"></el-table-column>
                <el-table-column prop="question" label="题目" header-align="center" :show-overflow-tooltip="false" >
                    <template scope="scope">
                        <span v-html='scope.row.question'></span>
                    </template>
                </el-table-column>
                <el-table-column prop="userName" align="center" label="纠错人" width="100"></el-table-column>
                <el-table-column prop="identityType" align="center" label="身份" width="80">
                    <template scope="scope">
                        <span v-if='scope.row.identityType == 0'>学生</span>
                        <span v-if='scope.row.identityType == 1'>教师</span>
                        <span v-if='scope.row.identityType == 2'>家长</span>
                    </template>
                </el-table-column>
                <el-table-column prop="exueCode" align="center" label="e学云ID号" width="120"></el-table-column>
                <el-table-column prop="sCreateTime" align="center" label="报错时间"  width="180"></el-table-column>
                <el-table-column prop="sourceType" align="center" label="来源"  width="80">
                    <template scope="scope">
                        <span v-if='scope.row.sourceType == 0'>APP</span>
                        <span v-if='scope.row.sourceType == 1'>Web</span>
                    </template>
                </el-table-column>
                <el-table-column prop="errorType" align="center" label="错误类型" :show-overflow-tooltip='true' width="150">
                </el-table-column>
                <el-table-column prop="pId" align="center" label="纠错描述" width="140">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="problemDetail(scope.row.pId,scope.row.subjectName,scope.row.questionId)">查看详细</el-button> 
                    </template>
                </el-table-column>
                <el-table-column prop="statusType" align="center" label="状态" width="100">
                    <template scope="scope">
                        <span v-if='scope.row.statusType == 0'>未处理</span>
                        <span v-if='scope.row.statusType == 1'>已处理</span>
                    </template>
                </el-table-column>
                <el-table-column prop="pId" align="center" label="操作" width="220" v-if='state' >
                    <template scope="scope" >
                        <!--<el-button type="text" class="btn-success" @click="problemEdit(scope.row.pId,scope.row.questionId,scope.row.difficult,scope.row.subjectName,scope.row.questionType)" v-if='scope.row.statusType == 0'>编辑题目</el-button>-->
                        <el-button type="text" class="btn-success" @click="problemOption(scope.row.pId)" >处理</el-button>
                        <el-button type="text" class="btn-success" @click="problemDelete(scope.row.pId)">删除</el-button> 
                    </template>
                </el-table-column>  
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
        <problem-detail v-if="dialogShow.isShow" :detailMessage='dialogShow'></problem-detail>

    </div>
</template>
<script>
    import TableLayout from 'components/TableLayout';
    import problemDetail from './problemDetail';
    import { mapState, mapActions, mapGetters } from 'vuex'
    import { getSubjectList, getProblemList, postUpdateError, postDeleteError} from 'api/modifyError.js';
    export default{
        name: 'problemList',
        components: {TableLayout, problemDetail},
        data() {
            return {
                loading: false,
                state: true,
                dialogShow: {
                    isShow: false,
                    problemID: '',
                    subjectName: ''
                },
                formData: {
                    subject: 'yw',
                    state: '0',
                    subjectList: [],
                    options: [{
                        value: '0',
                        label: '未处理'
                    }, {
                        value: '1',
                        label: '已处理'
                    }]
                },
                problemList: [],
                listQuery: { // 分页
                    page: 1,
                    total: 0
                },
                rules: {
                    subject: [
                        {required: true, message: '请选择学科', trigger: 'change'}
                    ]
                }
            }
        },
        watch: { // 局部刷新列表
            cacheUpdated(val) {
                val && this.getList();
            }
        },
        computed: {
            ...mapState({
                config: state => state.config.table,
                cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
            }),
            ...mapGetters(['uid', 'token'])
        },
        created() {
            this.getSubject();
            this.getList();
        },
        methods: {
            // 全局获取行数
            ...mapActions(['ChangePageSize']), 

            handleSizeChange(val) {
                this.listQuery.page = 1;
                this.ChangePageSize(val);
                this.getList();               
            },
            //  功能：当前页码数
            handleCurrentChange(val) {
                this.listQuery.page = val;
                this.getList() ;          
            },
            // 查询按钮
            onSubmit() {
                this.listQuery.page = 1;
                this.$refs['formData'].validate((rule) => {
                    if (rule) {
                        this.getList();
                    }
                })
            },
            // 获取学科
            getSubject() {
                getSubjectList().then(response => {
                    this.formData.subjectList=response.data.content;
                })
            },
            // 匹配公式
            filterFormula(val) {
                if (!val) return '';
            // [LaTeXI]E=m{{c}^{2}}[/LaTeXI]
                return val.replace(/\[LaTeXI\](.*?)\[\/LaTeXI\]/ig, ($1, $2) => {
                    console.log($2);
                    return '<img src="http://gs.xueleyun.com//cgi-bin/mathtex.cgi?'+ $2 +'"/>';
                });
            },
            // 获取纠错列表
            getList() {
                if (this.listQuery.page && this.config.pageSize) {
                    this.loading = true;  
                    getProblemList(this.formData.subject, this.formData.state, this.listQuery.page, this.config.pageSize).then(response => {
                        this.loading = false;
                        console.log(response.data.content.list);
                        this.problemList=response.data.content.list;
                        this.listQuery.total = response.data.content.pagination.total;
                        if (this.formData.state=='0') {
                            this.state=true;
                        } else {
                            this.state=false;
                        }
                        this.problemList.forEach(item => {
                            if (item.question) {
                                item.question=item.question.replace(/<[^>]+>/g, '');
                                item.question=item.question.replace(/&nbsp;/g, '');
                                item.question=this.filterFormula(item.question);
                            }
                            if (item.errorType) {
                                item.errorType=item.errorType.replace('0', '题干错误');
                                item.errorType=item.errorType.replace('1', '答案错误');
                                item.errorType=item.errorType.replace('2', '解析错误');
                                item.errorType=item.errorType.replace('3', '其他错误');
                            }
                            
                        })
                        
                    })
                }
            },
            // 查看详细
            problemDetail(pId, subjectName, questionId) {
                this.dialogShow.problemID=pId;
                this.dialogShow.subjectName=subjectName;
                this.dialogShow.questionId=questionId;
                this.dialogShow.isShow=true;
            },
            // 编辑题目
            problemEdit(pId, questionId, difficult, subjectName, questionType) {
                this.$router.push({ name: '编辑题目', params: { pId, questionId, difficult, subjectName, questionType, flag: 1}});
                // this.$router.push({name: '编辑题目', params: {'questionId': id, 'summaryKey': this.formInline.summaryKey, 'type': questionType, flag: 1, 'chapterId': this.formInline.chapter }});
            },
            // 处理按钮
            problemOption(pId) {
                let confirmText = '是否确定该题已处理完毕'; 
                this.$confirm(confirmText, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    postUpdateError(pId).then(response => {
                        if (response.data.status==200) {
                            this.getList();
                            this.$message({
                                type: 'success',
                                message: '处理成功!'
                            });
                            
                        }
                    })
                     
                }).catch(() => {
                   // console.log(123);         
                });
            },
            // 删除按钮
            problemDelete(pId) {
                let confirmText = '是否确定删除该题'; 
                this.$confirm(confirmText, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    postDeleteError(pId).then(response => {
                        if (response.data.status==200) {
                            this.getList();
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            }); 
                           
                        }
                    })     
                }).catch(() => {
                   // console.log(123);         
                });
            }
        }
    }
    
</script>
<style lang="scss">
    .problem-list{
        .el-table{
            .cell{
                overflow: hidden !important;
                text-overflow:ellipsis !important;
                white-space: nowrap !important;
            }
            
        }
    }
</style>